<template>
  <div class="app-container flex column">
    <div class="wrap f1 flex bb">
      <div class="title">设备安装情况</div>
      <e-charts :options="barData" class="f1"></e-charts>
    </div>
    <div class="wrap f1 flex bb">
      <div class="title">污染物月气泡图</div>
      <div class="datePicker">
        <div class="search-group" style="padding: 0; background: transparent">
          <div class="input-wrap" style="width: 100%">
            <div class="label">选择月份:</div>

            <div class="input-item" style="padding: 0; width: 100%">
              <a-month-picker
                v-model="monthValue"
                format="YYYY-MM"
                style="z-index: 1"
                :allowClear="false"
                value-format="YYYY-MM"
                placeholder="请选择月份"
                @change="monthChange"
              />
            </div>
          </div>
        </div>
      </div>
      <e-charts :options="scatterPlot" class="f1"></e-charts>
    </div>
    <div class="wrap f1 flex">
      <div class="title">污染物月情况</div>
      <div class="datePicker">
        <div class="search-group" style="padding: 0; background: transparent">
          <div class="input-wrap" style="width: 100%">
            <div class="label">选择年份:</div>

            <div class="input-item" style="padding: 0; width: 160px">
              <!-- <a-date-picker
                mode="year"
                placeholder="请选择年份"
                format="YYYY"
                value-format="YYYY-MM-DD"
                v-model="yearValue"
                style="width: 100%"
                :allowClear="false"
                :open="yearShowOne"
                @openChange="openChangeOne"
                @panelChange="panelChangeOne"
              /> -->
              <a-select
                ref="select"
                v-model="yearValue"
                placeholder="请选择年份"
                style="z-index: 1"
                @change="panelChangeOne"
              >
                <a-select-option :value="item" v-for="item in yearList" :key="item">{{ item }}</a-select-option>
              </a-select>
            </div>
          </div>
        </div>
      </div>
      <e-charts :options="heatMapData" class="f1"></e-charts>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import eCharts from '@/components/eCharts'
import { heatMapData, scatterPlot, barData } from './echarts'
export default {
  components: { eCharts },
  name: '',
  data() {
    return {
      barData: {}, // 柱状图
      scatterPlot: {}, // 散点图
      heatMapData: {}, // 热力图

      //年度计划的打开关闭状态，true为打开，false为关闭
      yearShowOne: false,
      monthValue: '',
      yearValue: '',
      yearList: [],
    }
  },
  mounted() {
    this.getBarData()
    this.monthValue = this.$moment().format('YYYY-MM')
    this.getScatterPlot(this.monthValue)

    this.yearValue = this.$moment().year()
    this.getHeatMapData(this.yearValue)

    const currentYear = this.$moment().year()
    for (let i = 0; i < 5; i++) {
      this.yearList.push(currentYear - i)
    }
  },
  methods: {
    monthChange(value) {
      this.getScatterPlot(value)
    },

    // 得到年份选择器的值
    panelChangeOne(value) {
      // console.log(value, 'yearValue')
      this.getHeatMapData(value)
      this.yearShowOne = false
    },

    // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      //status是打开或关闭的状态
      if (status) {
        this.yearShowOne = true
      }
    },

    async getBarData() {
      let { result } = await getAction('/device/region_device_status')
      this.barData = barData(result)
    },

    async getScatterPlot(time) {
      let { result } = await getAction('/sys/air_quality_record/find_pm_map', { time: this.$moment(time).valueOf() })
      this.scatterPlot = scatterPlot(result)
    },

    async getHeatMapData(time) {
      const date = new Date(time, 0, 1)
      const timestamp = date.getTime()
      let { result } = await getAction('/sys/air_quality_record/find_aqi_map', { time: timestamp })
      this.heatMapData = heatMapData(result, time)
      console.log(this.heatMapData, 'mapdata')
    },
  },
  destroyed() {},
}
</script>

<style lang="less">
.ant-calendar-year-panel {
  background: #045053;

  .ant-calendar-year-panel-header {
    border-bottom: 1px solid #3a8684;

    a {
      color: #409391;
    }

    .ant-calendar-year-panel-prev-decade-btn::before,
    .ant-calendar-year-panel-prev-decade-btn::after {
      border: 0 solid #409391;
      border-width: 1.5px 0 0 1.5px;
      border-radius: 1px;
    }

    .ant-calendar-month-year-next-decade-btn::before,
    .ant-calendar-month-year-next-decade-btn::after {
      border: 0 solid #409391;
      border-width: 1.5px 0 0 1.5px;
      border-radius: 1px;
    }
  }

  .ant-calendar-year-panel-decade-select {
    color: #409391;
  }

  .ant-calendar-year-panel-year {
    color: #409391;
  }

  .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year,
  .ant-calendar-year-panel-year:hover {
    color: #003a39;
    background: #07d6d9;
  }

  .ant-calendar-year-panel-year:hover {
    background: #07d6d9;
    color: #003a39;
  }
}
</style>

<style scoped lang="less">
.wrap {
  position: relative;

  .title {
    position: absolute;
    left: 0.5rem;
    top: 20%;
    font-size: 0.2rem;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #06d6db;
    width: 0.2rem;
    writing-mode: vertical-rl;
  }

  .datePicker {
    position: absolute;
    top: 3%;
    // right: 1.5rem;
    right: 0;
  }
}
.bb {
  border-bottom: 1px solid #015355;
}
</style>
